<div id="oobe-vue">
    <transition name="fade_simple">
        <template v-if="page == 'intro'">
            <div class="md-container">
                <video class="md-video" id="introVideo" playsinline src="ameres://content/oobe/oobe.webm"
                       autoplay="1"></video>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'welcome'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Welcome to Apple Music Electron</h1>
                </div>
                <div class="md-body">
                    <div style="text-align: center">A free and <a href="#"
                                                                  onclick="window.open('https://github.com/Apple-Music-Electron')">open
                        source</a> Apple Music streaming player based on Electron 15
                    </div>
                </div>
                <div class="md-body">
                    <div style="text-align: center">In a few steps, you can setup your Apple Music Electron
                        experience.
                    </div>
                </div>
                <div class="md-footer">
                    <button class="md-btn md-btn-primary" @click="page = 'region'">Continue</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'region'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Localization and Region</h1>
                </div>
                <div class="md-body" style="height: auto;display:flex;align-items: center;justify-content: center;">
                    Select your region and preferred language
                    <br>
                </div>
                <div class="md-body" style="display:flex;align-items: center;justify-content: center;">
                    <div style="
                        display: flex;
                        width: 100%;
                        justify-content: center;
                        ">
                        <div style="margin: 12px;">
                            Choose another country or region to see content specific to your location.
                            <select v-model="prefs.general.storefront" class="md-select" size="5"
                                    style="width:100%;height:100%;">
                                <option value=''>Automatic</option>
                                <option disabled>Africa, Middle East and India</option>
                                <option value='dz'>Algeria</option>
                                <option value='ao'>Angola</option>
                                <option value='az'>Azerbaijan</option>
                                <option value='bh'>Bahrain</option>
                                <option value='bj'>Benin</option>
                                <option value='bw'>Botswana</option>
                                <option value='cm'>Cameroon</option>
                                <option value='cv'>Cape Verde</option>
                                <option value='td'>Chad</option>
                                <option value='cd'>Congo, Democratic Republic of The</option>
                                <option value='ci'>Cote d'Ivoire</option>
                                <option value='eg'>Egypt</option>
                                <option value='ga'>Gabon</option>
                                <option value='gh'>Ghana</option>
                                <option value='gm'>Gambia</option>
                                <option value='gw'>Guinea Bissau</option>
                                <option value='il'>Israel</option>
                                <option value='in'>India</option>
                                <option value='in?l=hi'>India (Hindi)</option>
                                <option value='iq'>Iraq</option>
                                <option value='jo'>Jordan</option>
                                <option value='ke'>Kenya</option>
                                <option value='kw'>Kuwait</option>
                                <option value='lb'>Lebanon</option>
                                <option value='lr'>Liberia</option>
                                <option value='ly'>Libya</option>
                                <option value='lk'>Sri Lanka</option>
                                <option value='mg'>Madagascar</option>
                                <option value='mw'>Malawi</option>
                                <option value='ml'>Mali</option>
                                <option value='mr'>Mauritania</option>
                                <option value='mu'>Mauritius</option>
                                <option value='ma'>Morocco</option>
                                <option value='mz'>Mozambique</option>
                                <option value='na'>Namibia</option>
                                <option value='ne'>Niger</option>
                                <option value='ng'>Nigeria</option>
                                <option value='om'>Oman</option>
                                <option value='qa'>Qatar</option>
                                <option value='sa'>Saudi Arabia</option>
                                <option value='cg'>Republic of Congo</option>
                                <option value='rw'>Rwanda</option>
                                <option value='sn'>Senegal</option>
                                <option value='sc'>Seychelles</option>
                                <option value='sl'>Sierra Leone</option>
                                <option value='za'>South Africa</option>
                                <option value='sz'>Swaziland</option>
                                <option value='tj'>Tajikistan</option>
                                <option value='tz'>Tanzania</option>
                                <option value='tn'>Tunisia</option>
                                <option value='ug'>Uganda</option>
                                <option value='ae'>United Arab Emirates</option>
                                <option value='ye'>Yemen</option>
                                <option value='zm'>Zambia</option>
                                <option value='zw'>Zimbabwe</option>
                                <option disabled>Asia Pacific</option>
                                <option value='au'>Australia</option>
                                <option value='bt'>Bhutan</option>
                                <option value='cn'>China</option>
                                <option value='fj'>Fiji</option>
                                <option value='fm'>Micronesian, Federated States of</option>
                                <option value='hk'>Hong Kong</option>
                                <option value='id'>Indonesia</option>
                                <option value='jp'>Japan</option>
                                <option value='kr'>Korea</option>
                                <option value='jp?l=en'>Japan (English)</option>
                                <option value='kh'>Cambodia</option>
                                <option value='kz'>Kazakhstan</option>
                                <option value='kg'>Kyrgyzstan</option>
                                <option value='la'>Laos</option>
                                <option value='mn'>Mongolia</option>
                                <option value='mo'>Macau</option>
                                <option value='my'>Malaysia</option>
                                <option value='mv'>Maldives</option>
                                <option value='mm'>Myanmar</option>
                                <option value='np'>Nepal</option>
                                <option value='nz'>New Zealand</option>
                                <option value='pg'>Papua New Guinea</option>
                                <option value='ph'>Philippines</option>
                                <option value='sg'>Singapore</option>
                                <option value='sb'>Solomon Islands</option>
                                <option value='th'>Thailand</option>
                                <option value='tw'>Taiwan</option>
                                <option value='to'>Tonga</option>
                                <option value='tm'>Turkmenistan</option>
                                <option value='uz'>Uzbekistan</option>
                                <option value='vu'>Vanuatu</option>
                                <option value='vn'>Vietnam</option>
                                <option disabled>Europe</option>
                                <option value='at'>Austria</option>
                                <option value='am'>Armenia</option>
                                <option value='be?l=nl'>Belgium (Dutch)</option>
                                <option value='be?l=fr'>Belgium (French)</option>
                                <option value='be'>Belgium (English)</option>
                                <option value='bg'>Bulgaria</option>
                                <option value='by'>Belarus</option>
                                <option value='ba'>Bosnia and Herzegovina</option>
                                <option value='hr'>Croatia</option>
                                <option value='cy'>Cyprus</option>
                                <option value='cz'>Czech Republic</option>
                                <option value='de'>Germany</option>
                                <option value='dk'>Denmark</option>
                                <option value='ee'>Estonia</option>
                                <option value='es'>Spain</option>
                                <option value='fi'>Finland</option>
                                <option value='fr'>France</option>
                                <option value='ge'>Georgia</option>
                                <option value='gr'>Greece</option>
                                <option value='hu'>Hungary</option>
                                <option value='is'>Iceland</option>
                                <option value='ie'>Ireland</option>
                                <option value='it'>Italy</option>
                                <option value='xk'>Kosovo</option>
                                <option value='lt'>Lithuania</option>
                                <option value='lu?l=fr'>Luxembourg (French)</option>
                                <option value='lu?l=de'>Luxembourg (German)</option>
                                <option value='lu'>Luxembourg (English)</option>
                                <option value='lv'>Latvia</option>
                                <option value='md'>Moldova</option>
                                <option value='me'>Montenegro</option>
                                <option value='mt'>Malta, Republic of</option>
                                <option value='nl'>Netherlands</option>
                                <option value='no'>Norway</option>
                                <option value='mk'>North Macedonia</option>
                                <option value='pl'>Poland</option>
                                <option value='pt'>Portugal</option>
                                <option value='ro'>Romania</option>
                                <option value='ru'>Russia</option>
                                <option value='rs'>Serbia</option>
                                <option value='se'>Sweden</option>
                                <option value='si'>Slovenia</option>
                                <option value='sk'>Slovakia</option>
                                <option value='ch'>Switzerland (German)</option>
                                <option value='ch?l=fr'>Switzerland (French)</option>
                                <option value='ch?l=it'>Switzerland (Italian)</option>
                                <option value='tr'>Turkey</option>
                                <option value='ua'>Ukraine</option>
                                <option value='gb'>United Kingdom</option>
                                <option disabled>Latin America and the Caribbean</option>
                                <option value='ag'>Antigua & Barbuda</option>
                                <option value='ai'>Anguilla</option>
                                <option value='ar'>Argentina</option>
                                <option value='bs'>Bahamas</option>
                                <option value='bb'>Barbados</option>
                                <option value='bm'>Bermuda</option>
                                <option value='bo'>Bolivia</option>
                                <option value='br'>Brazil</option>
                                <option value='bz'>Belize</option>
                                <option value='cl'>Chile</option>
                                <option value='co'>Colombia</option>
                                <option value='cr'>Costa Rica</option>
                                <option value='dm'>Dominica</option>
                                <option value='do'>Dominican Republic</option>
                                <option value='ec'>Ecuador</option>
                                <option value='gd'>Grenada</option>
                                <option value='gt'>Guatemala</option>
                                <option value='gy'>Guyana</option>
                                <option value='hn'>Honduras</option>
                                <option value='jm'>Jamaica</option>
                                <option value='kn'>St. Kitts & Nevis</option>
                                <option value='ky'>Cayman Islands</option>
                                <option value='mx'>Mexico</option>
                                <option value='ms'>Montserrat</option>
                                <option value='ni'>Nicaragua</option>
                                <option value='pa'>Panama</option>
                                <option value='pe'>Peru</option>
                                <option value='py'>Paraguay</option>
                                <option value='lc'>Saint Lucia</option>
                                <option value='vc'>Saint Vincent and The Grenadines</option>
                                <option value='sv'>El Salvador</option>
                                <option value='sr'>Suriname</option>
                                <option value='tt'>Trinidad & Tobago</option>
                                <option value='tc'>Turks and Caicos</option>
                                <option value='uy'>Uruguay</option>
                                <option value='ve'>Venezuela</option>
                                <option value='vg'>British Virgin Islands</option>
                                <option disabled>The United States and Canada</option>
                                <option value='us'>United States</option>
                                <option value='ca?l=en'>Canada (English)</option>
                                <option value='ca?l=fr'>Canada (French)</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="md-footer">
                    <button class="md-btn" @click="page = 'welcome'">Back</button>
                    <button class="md-btn md-btn-primary" @click="page = 'theme'">Continue</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'theme'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Appearance</h1>
                </div>
                <div class="md-body">
                    <div class="md-option-container">
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Theme
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <select class="md-select" v-model="prefs.visual.theme"
                                        @change="AMStyling.loadTheme(prefs.visual.theme)"
                                        style="width:180px;">
                                    <option value="">Default
                                    <option v-for="(theme, id) in AM.themesListing" :value="id">{{ theme.name }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Transparency
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <select class="md-select" v-model="prefs.visual.transparencyEffect"
                                        style="width:180px;">
                                    <option value=''>Disabled</option>
                                    <option value='blur'>Blur Behind</option>
                                    <option value='acrylic'>Acrylic</option>
                                </select>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Use OS Accent as Application Accent
                                <br>
                                <small>Force the application to use your operating systems' accent.</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.visual.useOperatingSystemAccent" switch/>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Remove Scrollbars
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.visual.removeScrollbars" switch/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md-footer">
                    <button class="md-btn" @click="page = 'region'">Back</button>
                    <button class="md-btn md-btn-primary" @click="page = 'otherSettings'">Continue</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'otherSettings'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Other Settings</h1>
                </div>
                <div class="md-body" style="overflow-y:overlay;">
                    <div class="md-option-container">
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Audio Quality
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <select v-model="prefs.audio.audioQuality" class="md-select" style="width:180px;">
                                    <option value='auto'>Automatic</option>
                                    <option value='extreme'>Extreme (990kbps)</option>
                                    <option value='high'>High (256kbps)</option>
                                    <option value='standard'>Standard (64kbps)</option>
                                </select>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Seamless Audio Transitions
                                <br>
                                <small>Reduces or completely removes the delay between songs providing a smooth audio
                                    experience.</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.audio.seamlessAudioTransitions" switch/>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Discord Rich Presence
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <select class="md-select" v-model="prefs.general.discordRPC" style="width:180px;">
                                    <option value="">Disabled</option>
                                    <option value="am-title">Enabled as "Apple Music"</option>
                                    <option value="ame-title">Enabled as "Apple Music Electron"</option>
                                </select>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Close button should minimize Apple Music Electron
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.window.closeButtonMinimize" switch/>
                            </div>
                        </div>
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Enable Musixmatch Lyrics
                                <br>
                                <small>Less stable, but allows for lyrics translation and better lyrics
                                    detection.</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.visual.mxmon" switch/>
                            </div>
                        </div>
                        <div class="md-option-line" v-if="false">
                            <div class="md-option-segment">
                                Enable YouTube Lyrics (for Music Videos)
                                <br>
                                <small>(Not Recommended) Better timings and lyrics availability on some Music Videos,
                                    however can be inconsistent.</small>
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.visual.yton" switch/>
                            </div>
                        </div>
                        <div class="md-option-line" v-if="prefs.visual.yton || prefs.visual.mxmon">
                            <div class="md-option-segment">
                                Musixmatch Lyrics / Youtube Lyrics Translation Language
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <select v-model="prefs.visual.mxmlanguage" class="md-select" style="width:180px;">
                                    <option value='disabled'>Disabled</option>
                                    <option value='ab'>Abkhazian</option>
                                    <option value='aa'>Afar</option>
                                    <option value='af'>Afrikaans</option>
                                    <option value='ak'>Akan</option>
                                    <option value='sq'>Albanian</option>
                                    <option value='am'>Amharic</option>
                                    <option value='ar'>Arabic</option>
                                    <option value='an'>Aragonese</option>
                                    <option value='hy'>Armenian</option>
                                    <option value='as'>Assamese</option>
                                    <option value='a5'>Assamese-romaji</option>
                                    <option value='a3'>Asturian</option>
                                    <option value='av'>Avaric</option>
                                    <option value='ae'>Avestan</option>
                                    <option value='ay'>Aymara</option>
                                    <option value='az'>Azerbaijani</option>
                                    <option value='bm'>Bambara</option>
                                    <option value='ba'>Bashkir</option>
                                    <option value='eu'>Basque</option>
                                    <option value='b1'>Bavarian</option>
                                    <option value='be'>Belarusian</option>
                                    <option value='bn'>Bengali</option>
                                    <option value='b5'>Bengali-romaji</option>
                                    <option value='bh'>Bihari languages</option>
                                    <option value='b3'>Bishnupriya</option>
                                    <option value='bi'>Bislama</option>
                                    <option value='bs'>Bosnian</option>
                                    <option value='br'>Breton</option>
                                    <option value='bg'>Bulgarian</option>
                                    <option value='my'>Burmese</option>
                                    <option value='ca'>Catalan</option>
                                    <option value='c2'>Cebuano</option>
                                    <option value='b2'>Central bikol</option>
                                    <option value='c3'>Central kurdish</option>
                                    <option value='ch'>Chamorro</option>
                                    <option value='c1'>Chavacano</option>
                                    <option value='ce'>Chechen</option>
                                    <option value='ny'>Chichewa</option>
                                    <option value='zh'>Chinese (simplified)</option>
                                    <option value='z1'>Chinese (traditional)</option>
                                    <option value='rz'>Chinese-romaji</option>
                                    <option value='cu'>Church slavic</option>
                                    <option value='cv'>Chuvash</option>
                                    <option value='kw'>Cornish</option>
                                    <option value='co'>Corsican</option>
                                    <option value='cr'>Cree</option>
                                    <option value='c4'>Creoles and pidgins</option>
                                    <option value='c5'>Creoles and pidgins, english based</option>
                                    <option value='c6'>Creoles and pidgins, french-based</option>
                                    <option value='c7'>Creoles and pidgins, portuguese-based</option>
                                    <option value='hr'>Croatian</option>
                                    <option value='cs'>Czech</option>
                                    <option value='da'>Danish</option>
                                    <option value='d1'>Dimli (individual language)</option>
                                    <option value='dv'>Divehi</option>
                                    <option value='d3'>Dotyali</option>
                                    <option value='nl'>Dutch</option>
                                    <option value='dz'>Dzongkha</option>
                                    <option value='m2'>Eastern mari</option>
                                    <option value='a2'>Egyptian arabic</option>
                                    <option value='e1'>Emilian-romagnol</option>
                                    <option value='en'>English</option>
                                    <option value='m6'>Erzya</option>
                                    <option value='eo'>Esperanto</option>
                                    <option value='et'>Estonian</option>
                                    <option value='ee'>Ewe</option>
                                    <option value='fo'>Faroese</option>
                                    <option value='h1'>Fiji hindi</option>
                                    <option value='fj'>Fijian</option>
                                    <option value='f1'>Filipino</option>
                                    <option value='fi'>Finnish</option>
                                    <option value='fr'>French</option>
                                    <option value='f2'>Frisian, northern</option>
                                    <option value='fy'>Frisian, western</option>
                                    <option value='ff'>Fulah</option>
                                    <option value='gl'>Galician</option>
                                    <option value='lg'>Ganda</option>
                                    <option value='ka'>Georgian</option>
                                    <option value='de'>German</option>
                                    <option value='n2'>German, low</option>
                                    <option value='g1'>Goan konkani</option>
                                    <option value='el'>Greek</option>
                                    <option value='e2'>Greek-romaji</option>
                                    <option value='kl'>Greenlandic</option>
                                    <option value='gn'>Guarani</option>
                                    <option value='gu'>Gujarati</option>
                                    <option value='g2'>Gujarati-romaji</option>
                                    <option value='ht'>Haitian creole</option>
                                    <option value='ha'>Hausa</option>
                                    <option value='he'>Hebrew</option>
                                    <option value='hz'>Herero</option>
                                    <option value='hi'>Hindi</option>
                                    <option value='h3'>Hindi-romaji</option>
                                    <option value='ho'>Hiri motu</option>
                                    <option value='hu'>Hungarian</option>
                                    <option value='is'>Icelandic</option>
                                    <option value='io'>Ido</option>
                                    <option value='ig'>Igbo</option>
                                    <option value='i1'>Iloko</option>
                                    <option value='id'>Indonesian</option>
                                    <option value='ia'>Interlingua</option>
                                    <option value='ie'>Interlingue</option>
                                    <option value='iu'>Inuktitut</option>
                                    <option value='ik'>Inupiaq</option>
                                    <option value='ga'>Irish</option>
                                    <option value='it'>Italian</option>
                                    <option value='ja'>Japanese</option>
                                    <option value='rj'>Japanese-romaji</option>
                                    <option value='jv'>Javanese</option>
                                    <option value='x1'>Kalmyk</option>
                                    <option value='kn'>Kannada</option>
                                    <option value='k2'>Kannada-romaji</option>
                                    <option value='kr'>Kanuri</option>
                                    <option value='k1'>Karachay-balkar</option>
                                    <option value='ks'>Kashmiri</option>
                                    <option value='kk'>Kazakh</option>
                                    <option value='km'>Khmer, central</option>
                                    <option value='ki'>Kikuyu</option>
                                    <option value='rw'>Kinyarwanda</option>
                                    <option value='ky'>Kirghiz</option>
                                    <option value='kv'>Komi</option>
                                    <option value='kg'>Kongo</option>
                                    <option value='ko'>Korean</option>
                                    <option value='rk'>Korean-romaji</option>
                                    <option value='kj'>Kuanyama</option>
                                    <option value='ku'>Kurdish</option>
                                    <option value='lo'>Lao</option>
                                    <option value='la'>Latin</option>
                                    <option value='lv'>Latvian</option>
                                    <option value='l1'>Lezghian</option>
                                    <option value='li'>Limburgish</option>
                                    <option value='ln'>Lingala</option>
                                    <option value='lt'>Lithuanian</option>
                                    <option value='j1'>Lojban</option>
                                    <option value='l2'>Lombard</option>
                                    <option value='lu'>Luba-katanga</option>
                                    <option value='lb'>Luxembourgish</option>
                                    <option value='mk'>Macedonian</option>
                                    <option value='m1'>Maithili</option>
                                    <option value='mg'>Malagasy</option>
                                    <option value='ms'>Malay</option>
                                    <option value='ml'>Malayalam</option>
                                    <option value='m8'>Malayalam-romaji</option>
                                    <option value='mt'>Maltese</option>
                                    <option value='gv'>Manx</option>
                                    <option value='mi'>Maori</option>
                                    <option value='mr'>Marathi</option>
                                    <option value='m9'>Marathi-romaji</option>
                                    <option value='mh'>Marshallese</option>
                                    <option value='m7'>Mazanderani</option>
                                    <option value='m3'>Minangkabau</option>
                                    <option value='x2'>Mingrelian</option>
                                    <option value='m5'>Mirandese</option>
                                    <option value='mo'>Moldavian</option>
                                    <option value='mn'>Mongolian</option>
                                    <option value='n4'>Nahuatl</option>
                                    <option value='na'>Nauru</option>
                                    <option value='nv'>Navajo</option>
                                    <option value='nd'>Ndebele, north</option>
                                    <option value='nr'>Ndebele, south</option>
                                    <option value='ng'>Ndonga</option>
                                    <option value='n1'>Neapolitan</option>
                                    <option value='n3'>Nepal bhasa</option>
                                    <option value='ne'>Nepali</option>
                                    <option value='n5'>Nepali-romaji</option>
                                    <option value='l3'>Northern luri</option>
                                    <option value='no'>Norwegian</option>
                                    <option value='nb'>Norwegian bokmål</option>
                                    <option value='nn'>Norwegian nynorsk</option>
                                    <option value='oc'>Occitan</option>
                                    <option value='oj'>Ojibwa</option>
                                    <option value='or'>Oriya</option>
                                    <option value='o1'>Oriya-romaji</option>
                                    <option value='om'>Oromo</option>
                                    <option value='os'>Ossetian</option>
                                    <option value='pi'>Pali</option>
                                    <option value='p1'>Pampanga</option>
                                    <option value='pa'>Panjabi</option>
                                    <option value='p5'>Panjabi-romaji</option>
                                    <option value='fa'>Persian</option>
                                    <option value='p2'>Pfaelzisch</option>
                                    <option value='p3'>Piemontese</option>
                                    <option value='pl'>Polish</option>
                                    <option value='pt'>Portuguese</option>
                                    <option value='ps'>Pushto</option>
                                    <option value='qu'>Quechua</option>
                                    <option value='ro'>Romanian</option>
                                    <option value='rm'>Romansh</option>
                                    <option value='rn'>Rundi</option>
                                    <option value='b4'>Russia buriat</option>
                                    <option value='ru'>Russian</option>
                                    <option value='r2'>Russian-romaji</option>
                                    <option value='r1'>Rusyn</option>
                                    <option value='se'>Sami, northern</option>
                                    <option value='sm'>Samoan</option>
                                    <option value='sg'>Sango</option>
                                    <option value='sa'>Sanskrit</option>
                                    <option value='s4'>Sanskrit-romaji</option>
                                    <option value='sc'>Sardinian</option>
                                    <option value='s3'>Scots</option>
                                    <option value='gd'>Scottish gaelic</option>
                                    <option value='sr'>Serbian</option>
                                    <option value='sh'>Serbo-croatian</option>
                                    <option value='sn'>Shona</option>
                                    <option value='ii'>Sichuan yi</option>
                                    <option value='s2'>Sicilian</option>
                                    <option value='sd'>Sindhi</option>
                                    <option value='si'>Sinhala</option>
                                    <option value='sk'>Slovak</option>
                                    <option value='sl'>Slovenian</option>
                                    <option value='so'>Somali</option>
                                    <option value='d2'>Sorbian, lower</option>
                                    <option value='h2'>Sorbian, upper</option>
                                    <option value='st'>Sotho, southern</option>
                                    <option value='a4'>South azerbaijani</option>
                                    <option value='es'>Spanish</option>
                                    <option value='su'>Sundanese</option>
                                    <option value='sw'>Swahili</option>
                                    <option value='ss'>Swati</option>
                                    <option value='sv'>Swedish</option>
                                    <option value='tl'>Tagalog</option>
                                    <option value='ty'>Tahitian</option>
                                    <option value='tg'>Tajik</option>
                                    <option value='ta'>Tamil</option>
                                    <option value='t2'>Tamil-romaji</option>
                                    <option value='tt'>Tatar</option>
                                    <option value='te'>Telugu</option>
                                    <option value='t3'>Telugu-romaji</option>
                                    <option value='th'>Thai</option>
                                    <option value='t4'>Thai-romaji</option>
                                    <option value='bo'>Tibetan</option>
                                    <option value='ti'>Tigrinya</option>
                                    <option value='to'>Tonga (tonga islands)</option>
                                    <option value='a1'>Tosk albanian</option>
                                    <option value='ts'>Tsonga</option>
                                    <option value='tn'>Tswana</option>
                                    <option value='tr'>Turkish</option>
                                    <option value='tk'>Turkmen</option>
                                    <option value='t1'>Tuvinian</option>
                                    <option value='tw'>Twi</option>
                                    <option value='ug'>Uighur</option>
                                    <option value='uk'>Ukrainian</option>
                                    <option value='ur'>Urdu</option>
                                    <option value='u1'>Urdu-romaji</option>
                                    <option value='uz'>Uzbek</option>
                                    <option value='ve'>Venda</option>
                                    <option value='v1'>Venetian</option>
                                    <option value='v2'>Veps</option>
                                    <option value='vi'>Vietnamese</option>
                                    <option value='v3'>Vlaams</option>
                                    <option value='vo'>Volapük</option>
                                    <option value='wa'>Walloon</option>
                                    <option value='w1'>Waray</option>
                                    <option value='cy'>Welsh</option>
                                    <option value='m4'>Western mari</option>
                                    <option value='p4'>Western panjabi</option>
                                    <option value='wo'>Wolof</option>
                                    <option value='w2'>Wu chinese</option>
                                    <option value='xh'>Xhosa</option>
                                    <option value='s1'>Yakut</option>
                                    <option value='yi'>Yiddish</option>
                                    <option value='yo'>Yoruba</option>
                                    <option value='y1'>Yue chinese</option>
                                    <option value='za'>Zhuang</option>
                                    <option value='zu'>Zulu</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md-footer">
                    <button class="md-btn" @click="page = 'theme'">Back</button>
                    <button class="md-btn md-btn-primary" @click="page = 'statistics'">Continue</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'statistics'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Statistics</h1>
                </div>
                <div class="md-body" style="height: auto;display:flex;align-items: center;justify-content: center;">
                    <p>
                        These logs when enabled allow us to fix bugs and
                        errors that may occur during your listening sessions to better improve the application. We
                        understand if you're not comfortable with them on, but it helps us out immensely in figuring out
                        widespread issues. (Note: We do not gather personal information, only stuff that shows to you as
                        an
                        error in the code.)
                    </p>
                </div>
                <div class="md-body" style="display:flex;align-items: center;justify-content: center;">
                    <div class="md-option-container" style="width:100%;">
                        <div class="md-option-line">
                            <div class="md-option-segment">
                                Allow statistics to be collected when errors or crashes
                                occur
                            </div>
                            <div class="md-option-segment md-option-segment_auto">
                                <input type="checkbox" v-model="prefs.general.analyticsEnabled" switch/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="md-footer">
                    <button class="md-btn" @click="page = 'otherSettings'">Back</button>
                    <button class="md-btn md-btn-primary" @click="page = 'credits'">Continue</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'credits'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Credits</h1>
                </div>
                <div class="md-body">
                    <div style="display: block;" class="dt-footer__copyright dt-flex-container">
                        <p>"Apple Music" - Copyright © 2021 <a href="https://www.apple.com/" class="dt-footer__link"
                                                               target="_blank"
                                                               rel="noopener" data-dt-link-to-exclude="">Apple Inc.</a>
                            All Rights
                            Reserved.</p>
                        <p>Major thanks to the <a href="https://github.com/Apple-Music-Electron" class="dt-footer__link"
                                                  target="_blank" rel="noopener" data-dt-link-to-exclude=""> Apple Music
                            Electron Team</a> and to all of our <a
                                href="https://github.com/Apple-Music-Electron/Apple-Music-Electron/graphs/contributors"
                                class="dt-footer__link" target="_blank" rel="noopener" data-dt-link-to-exclude="">contributors</a>.
                        </p>

                        <div class="dt-footer__locale"></div>
                    </div>

                    <ul class="dt-footer__list dt-flex-container">
                        <li class="dt-footer__item">
                            <a href="https://github.com/Apple-Music-Electron" class="dt-footer__link" target="_blank"
                               rel="noopener" data-dt-link-to-exclude="">Development Team</a>
                            <ul>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://github.com/cryptofyre')">cryptofyre</a>
                                </li>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://github.com/coredev-uk')">Core</a>
                                </li>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://github.com/child-duckling')">Quacksire</a>
                                </li>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://github.com/booploops')">booploops</a>
                                </li>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://github.com/vapormusic')">vapormusic</a>
                                </li>
                            </ul>
                        </li>


                        <li class="dt-footer__item" style="margin: 20px auto 0 auto;">
                            <p class="dt-footer__link">Social Communications Team</p>
                            <ul>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://twitter.com/MoonyVoid')">Void</a>
                                </li>
                                <li class="dt-footer__list-item"><a href="#"
                                                                    onclick="window.open('https://twitter.com/noah_grose')">NoseySG</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="md-body" style="display:flex;justify-content: center;align-content: center;">
                    <img class="md-contributors"
                         onclick="window.open('https://github.com/Apple-Music-Electron/Apple-Music-Electron/graphs/contributors')"
                         src="https://contrib.rocks/image?repo=Apple-Music-Electron/Apple-Music-Electron"/>
                </div>
                <div class="md-footer">
                    <button class="md-btn" @click="page = 'otherSettings'">Back</button>
                    <button class="md-btn md-btn-primary" @click="close()">Done</button>
                </div>
            </div>
        </template>
    </transition>
    <transition name="fade">
        <template v-if="page == 'template'">
            <div class="md-container">
                <div class="md-header">
                    <h1 class="md-h1">Header</h1>
                </div>
                <div class="md-body">
                    body content
                </div>
                <div class="md-footer">
                    <button class="md-btn">Back</button>
                    <button class="md-btn md-btn-primary">Continue</button>
                </div>
            </div>
        </template>
    </transition>
</div>

<style>

    .md-video {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover;
        pointer-events: none;
    }

    .md-contributors {
        display: block;
        object-fit: contain;
        padding: 20px;
        width: 90%;
        max-width: 900px;
        transition: all .25s var(--appleEase);
        border-radius: 10px;
        box-shadow: 0px 0px 0px rgb(0 0 0 / 25%);
        background: rgb(200 200 200 / 10%);
        will-change: transform;
        cursor: pointer;
    }

    .md-contributors:hover {
        transform: scale(1.02);
        background: #eee;
        box-shadow: 0px 10px 10px rgb(0 0 0 / 25%);
    }

    #oobe-vue {
        height: 100%;
    }
</style>